<template>
    <div :style="{ width: '100%', height: '100%' }">
        <div v-if="isError !== true" class="echart" :id="controlid" :style="{
        float: 'left',
        width: '100%',
        height: '100%',
    }"></div>
        <div v-else class="logmsg">{{ logmsg }}</div>
    </div>
</template>
<script>
import 'echarts-wordcloud';
import * as echarts from 'echarts'
import tdTheme from './theme.json' // 引入默认主题
import 'echarts-gl'
import 'echarts-liquidfill/src/liquidFill.js' //在这里引入
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
    props: ['options', 'mapcity', 'mapcode'],
    data() {
        return {
            mychart: undefined,
            controlid: '',
            optionconfig: {},
            isError: false,
            logmsg: '',
            ajaxget: null,
            ajaxpost: null,
        }
    },
    methods: {
        initChart() {
            // this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
            this.mychart = echarts.init(
                document.getElementById(this.controlid),
                tdTheme
            )
            let app = {}
            this.$emit('loadoptions', this.mychart, echarts, app, this)
            if (this.options !== undefined && this.options !== null) {
                this.mychart.clear() // 每次重绘之前，先清除一下
                this.mychart.setOption(this.options, true)
            }
            const _this = this
            const erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById(this.controlid), () => {
                _this.$nextTick(() => {
                    this.resize()
                })
            })
            // // 随着屏幕大小调节图表
            // document.getElementById(this.controlid).addEventListener('resize', () => {
            //   debugger;
            //   this.resize()
            // })
            this.$emit('initChartAfter')
            this.mychart.on("Click", param => {
                this.$emit("click", param);
            });
            this.mychart.getZr().on("click", params => {
                if (!params.target) {
                    this.$emit("zrclick", params);
                }
            });
        },
        resize() {
            this.mychart.resize()
        },
        getMychart() {
            return this.mychart
        },
        loadOption(options) {
            if (this.mychart != null) {
                if (options !== null) {
                    if (options.series.length > 0 && options.series[0].maskImage != null) {
                        var maskResource = new Image();
                        maskResource.src = options.series[0].maskImage;
                        options.series[0].maskImage = maskResource
                    }
                    this.mychart.setOption(options)
                } else {
                    this.mychart.setOption({})
                }
            }
        },
    },
    created() {
        this.controlid =
            'div' +
            Date.parse(new Date()) +
            '_' +
            Math.ceil(Math.random() * 99999)
        this.$nextTick(() => {
            this.initChart()
        })
    },
    mounted() {

    },
    watch: {
        options: {
            handler(val) {
                if (this.mychart !== undefined) {
                    if (this.options !== undefined) {
                        this.mychart.setOption(val, true)
                    }
                }
            },
            deep: true
        },
    },
    beforeDestroy() {
        if (this.mychart) {
            this.mychart.dispose();
        }
    },
}
</script>
<style scoped>
.logmsg {
    color: red;
    font-size: 25px;
}
</style>
